<template>
    <div class="page-layout">
        <header></header>
        <main>
        <el-timeline v-for="(it,index) in approveInfo" :key="index">
            <el-timeline-item :timestamp="it.createdAt" placement="top">
            <el-card>
                <h4>{{it.remark}}</h4>
                <p>{{`${it.user_name} 提交于 ${it.time}`}}</p>
            </el-card>
            </el-timeline-item>
        </el-timeline>
        </main>
        <footer></footer>
    </div>
</template>
<script>
import { productApproveListApi, productInfoApi } from '@/apis/productApi'
export default {
    data() {
        return {
            goodsInfo:{},
            approveInfo:[]
        }
    },
    mounted(){
         productInfoApi(this.$route.query.id).then(d=>{
            this.goodsInfo=d.data
            // console.log(this.goodsInfo)
         })
         productApproveListApi(this.$route.query.id).then(res=>{
            this.approveInfo=res.data.rows
            // console.log(this.approveInfo)
            this.approveInfo.map(it=>it.time=it.time.split('T')[0]+' '+(it.time.split('T')[1].split(':')[0]-0+8)+':'+it.time.split('T')[1].split(':')[1]+':'+it.time.split('T')[1].split(':')[2].substring(0,2))
         })
    }
}
</script>

<style lang="less" scoped>
    .page-layout {
        display: block;
        position: relative;
        height: 100%;
        header{
            height: 10vh;
            border-bottom: 1px dashed black;
        }
        main{
            height: 80vh;
        }
    }
</style>